/**
 *@author   lulg
 *@createTime   2018/03/20
 *@updateTime   2018/03/21
 *@description  module  component
 */
import config from '../../../../config/config.js'
import Icon from '../../../basic/icon/index.vue'

const prefixCls = config.prefix + '-tabs'
// module
const module = {
  name: config.prefix + '-tab',
  components: {},
  props: {
    navList: {
      type: Array,
      default () {
        return []
      }
    },
    activeKey: {
      type: [String, Number, Array],
      default: 0
    },
    position: {
      type: String,
      default: 'top'
    }
  },
  computed: {
    tabWrapStyle () {
      const style = { display: 'flex' }
      if (this.position === 'left' || this.position === 'right') {
        style['flex-direction'] = 'column'
      }
      return style
    }
  },
  data () {
    return {}
  },
  methods: {
    showClose (item) {
      if (item.closable !== null) {
        return item.closable
      } else {
        return this.closable
      }
    },
    handleRemove (index) {
      this.$emit('remove', index)
    },
    handleChange (index, name) {
      this.$emit('tabchange', index, name)
    },
    tabCls (item) {
      let active = false
      if (Array.isArray(this.activeKey)) {
        active = this.activeKey.includes(item.name)
      } else {
        active = item.name === this.activeKey
      };
      return [
                `${prefixCls}-tab`,
                {
                  [`${prefixCls}-tab-disabled`]: item.disabled,
                  [`${prefixCls}-tab-active`]: active,
                  [`${prefixCls}-tab-space`]: item.isSpace
                }
      ]
    }
  },
  watch: {},
  render (h) {
    const { handleRemove, handleChange } = this
    const zIndexMax = this.navList.length
    const navList = this.navList

    const allNavs = navList.map((item, index) => {
      const label = item.labelVm
      const clazz = this.tabCls(item)

      let style = { 'z-index': (zIndexMax - index - 1) }

      let active = false
      if (Array.isArray(this.activeKey)) {
        active = this.activeKey.includes(item.name)
      } else {
        active = item.name === this.activeKey
      };
      if (active) {
        style = { 'z-index': zIndexMax }
      }

      if (label) {
        return <div class={clazz} style={style} onClick={() => {
          handleChange(index, item.name)
        }}>
          {label}
        </div>
      } else {
        const icon = item.icon !== '' ? (<Icon type={item.icon}></Icon>) : ''
        const labelContent = item.label
        const closeIcon = this.showClose(item) ? (<Icon type="ios-close-empty" nativeOnClick={(e) => {
          handleRemove(index)
          e.stopPropagation()
        }}></Icon>) : ''

        return (
          <div class={clazz} style={style} onClick={() => {
            handleChange(index, item.name)
          }}>
            {icon}{labelContent}{closeIcon}
          </div>
        )
      }
    })
    return (
      <div style={this.tabWrapStyle}>
        {allNavs}
      </div>
    )
  }
}

export default module
